<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>订房</title>
    <link rel="stylesheet" href="../../css/mycss.css"/>
    <style>
        .book-info{
            /*height: 380px;*/
        }

        .book-info table{
            width: 50%;
            font-family: '楷体';
            font-size: 18px;
        }

        .book-info table td{
            height: 50px;
        }
    </style>
    <link rel="stylesheet" href="../../public/layui/css/layui.css"/>
    <script src="../../public/layui/layui.js"></script>
    <!--    <link rel="stylesheet" href="../../public/layui/layui.js">-->
</head>
<body>
    <div class="client-container">
        <img src="http://localhost:8000/hotal/front/img/111.jpg" style="width: 100%;height: 10%"/>
        <div class="book-info">
            <table>
                <tr>
                    <td>房型:</td>
                    <td th:text="${house.getHouseName()}"></td>
                    <td>普通价格:</td>
                    <td th:text="${house.getHousePrice()} + '元/晚'"></td>
                </tr>
                <tr>
                    <td>状态:</td>
                    <td th:text="${house.getHouseState()}"></td>
                    <td style="color: red">vip价格:</td>
                    <td th:text="${house.vipPrice} + '元/晚'"></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td style="color: greenyellow">团购价格:</td>
                    <td th:text="${house.groupPrice} + '元/晚'"></td>
                </tr>
            </table>
            <button id="common" data-method="notice" type="button" class="layui-btn layui-btn-primary" style="background: skyblue">普通预定</button>
            <button th:if="${session.user != null and session.user.role == 1}" id="vip" data-method="notice" type="button" class="layui-btn layui-btn-primary" style="background: orange">vip预定</button>
            <button th:if="${session.user != null and session.user.role != 1}" id="getvip" data-method="notice" type="button" class="layui-btn layui-btn-primary" style="background: orange">申请vip</button>
            <button id="group" data-method="notice" type="button" class="layui-btn layui-btn-primary" style="background: orangered">团购预定</button>
        </div>
        <hr/>
    </div>
    <div id="order" class="client-container" style="display: none">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">游客姓名</label>
                    <div class="layui-input-inline">
                        <input value="逗比了制约" type="text" name="realName" lay-verify="required" autocomplete="off" class="layui-input" style="width: 300px"/>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">性别</label>
                    <div class="layui-input-block">
                        <input type="radio" name="sex" value="男" title="男" checked=""/>
                        <input type="radio" name="sex" value="女" title="女"/>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">支付方式</label>
                    <div class="layui-input-block">
                        <input type="radio" name="paymethod" value="银行卡" title="银行卡" checked=""/>
                        <input type="radio" name="paymethod" value="支付宝" title="支付宝"/>
                        <input type="radio" name="paymethod" value="微信" title="微信"/>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">身份证号</label>
                    <div class="layui-input-inline">
                        <input value="320681212312312" type="text" name="identificationNum" lay-verify="required|identity" autocomplete="off" class="layui-input" style="width: 300px"/>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">联系方式</label>
                    <div class="layui-input-inline">
                        <input value="18262893421" type="text" name="telephone" lay-verify="required|phone" autocomplete="off" class="layui-input" style="width: 300px"/>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">开始入住</label>
                    <div class="layui-input-inline">
                        <input name="startTime" type="text" class="layui-input" id="test5" placeholder="yyyy-MM-dd HH:mm:ss"/>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">结束时间</label>
                    <div class="layui-input-inline">
                        <input name="endTime" type="text" class="layui-input" id="test6" placeholder="yyyy-MM-dd HH:mm:ss"/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button id="submit" type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                        <button id="cancel" type="reset" class="layui-btn layui-btn-primary">取消</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div id="vip-layer" style="display: none">
        <button id="upgraduate" data-method="notice" type="button" class="layui-btn layui-btn-primary" style="background: skyblue">升级至vip</button>
    </div>
</body>
<script>
    layui.use(['jquery','layer','form','laydate'], function(){
        let $ = layui.jquery;
        let layer = layui.layer;
        let form = layui.form;
        let laydate = layui.laydate;

        let method = 0;

        function notice() {
            //示范一个公告层
            layer.open({
                type: 1
                ,title: false //不显示标题栏
                ,closeBtn: true
                ,area: ['700px', '700px']
                ,shade: 0.8
                ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
                ,btnAlign: 'c'
                ,moveType: 1 //拖拽模式，0或者1
                ,content: $("#order")
            });
        }


        $('#common').on('click', function () {
            method = 0;
            notice();
        });

        $('#vip').on('click', function () {
            method = 1;
            notice();
        });

        $('#group').on('click', function () {
            method = 2;
            notice();
        });

        $('#getvip').on('click', function () {
            // 打开申请弹出层的页面
            layer.open({
                type: 1
                ,title: false //不显示标题栏
                ,closeBtn: true
                ,area: ['700px', '700px']
                ,shade: 0.8
                ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
                ,btnAlign: 'c'
                ,moveType: 1 //拖拽模式，0或者1
                ,content: $("#vip-layer")
            });
        });

        $('#upgraduate').on('click', function () {
           $.ajax({
               url: '../../user/vip',
               success(data, status) {
                   console.log('data', data);
                   location.reload();
               }
           })
        });

        //日期时间选择器
        laydate.render({
            elem: '#test5'
            ,type: 'datetime'
            ,value: new Date()
        });

        //日期时间选择器
        laydate.render({
            elem: '#test6'
            ,type: 'datetime'
            ,value: new Date()
        });

        //监听提交
        form.on('submit(demo1)', function(data){
            data.field.hid = "1";
            data.field.method = method;
            if (method === 0 || method === 1) {
                // 如果当前是普通用户订购
                $.ajax({
                    url: "/hotal/front/reserve/house",
                    type: 'POST',
                    dataType:'json',
                    contentType:'application/json;charset=UTF-8',
                    data:JSON.stringify(data.field),
                    success:function(data, status){
                        if (data.code === 200) {
                            layer.alert('预定成功');
                        }else if (data.code === 500) {
                            layer.alert(data.data);
                        }
                    }
                });
            } else if (method === 2) {
                // 如果当前是2就是团购订购

            }

            return false;
        });

    });
</script>
</html>